<template>
  <PageContainer title="异常处理">
    <div class="disposal-exceptions">
      <el-card>
        <el-table :data="exceptionList" stripe>
          <el-table-column prop="exceptionId" label="异常ID" width="120" />
          <el-table-column prop="recordId" label="投放记录ID" width="120" />
          <el-table-column prop="userId" label="用户ID" width="100" />
          <el-table-column prop="deviceId" label="设备ID" width="100" />
          <el-table-column prop="exceptionType" label="异常类型" width="120" />
          <el-table-column prop="description" label="异常描述" width="200" />
          <el-table-column prop="status" label="处理状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发现时间" width="180" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleException(row)">
                处理
              </el-button>
              <el-button type="info" size="small" @click="viewDetail(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import PageContainer from '@/components/PageContainer.vue'

const exceptionList = ref([
  {
    exceptionId: 'EX001',
    recordId: 'DR001',
    userId: 'U001',
    deviceId: 'RB001',
    exceptionType: '重量异常',
    description: '投放重量与实际重量不符',
    status: 'pending',
    createTime: '2024-01-20 14:30:25'
  }
])

const getStatusType = (status: string) => {
  const map: Record<string, string> = {
    pending: 'warning',
    processing: 'primary',
    resolved: 'success',
    rejected: 'danger'
  }
  return map[status] || 'info'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    rejected: '已拒绝'
  }
  return map[status] || '未知'
}

const handleException = (row: any) => {
  ElMessage.info(`处理异常 ${row.exceptionId}`)
}

const viewDetail = (row: any) => {
  ElMessage.info(`查看异常 ${row.exceptionId} 详情`)
}
</script>